<template>
  <el-container>
    <!-- 这是快递员的个人信息 -->
    <el-header>
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" ><img class="a" src="../tlc/img/快递 (1).png" /></el-menu-item>
        <el-menu-item index="0" class="z"><router-link :underline="false" to="/kdypickup"><span class="zt">首页</span></router-link></el-menu-item>

        <div class="dd">快速登录/注册</div>
      </el-menu>

      <div class="line"></div>
    </el-header>

    <el-menu  class="wc"  mode="horizontal"  background-color="#324f94"  text-color="#fff" active-text-color="#a0d919" style="width: 100%" >
      <el-menu-item index="4" class="a1"><router-link :underline="false" to="/kdypickup"><img class="a" src="../tlc/img/004-查快递 (1).png" /><span class="zt" >快递员的取件</span ></router-link ><span></span ></el-menu-item>
      <el-menu-item index="4" class="a2"><router-link :underline="false" to="/kdysend" ><img class="a" src="../tlc/img/002-快递箱 (1).png" /><span class="zt" ></span>快递派送</router-link ><span></span ></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdycomputation"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">查看货物是否填写进行计量</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdyworkingRange"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">取派件工作范围</span></router-link><span></span></el-menu-item>
      <el-menu-item index="4" class="a3"> <router-link :underline="false" to="/kdyinformation"><img class="a" src="../tlc/img/005-收快递 (1).png"/><span class="zt">快递员个人信息</span></router-link><span></span></el-menu-item>
    </el-menu>

    <el-tabs v-model="activeName" stretch>
      <el-tab-pane label="快递员的个人信息" name="second"  class="boxMainA">
        <!-- 个人信息 -->
        <div> <img data-v-0aaa3cd8="" src="../../../../src/assets/待发货.png" alt="" class="img1"/> </div>
        <el-form ref="form" :model="SystemTmsUsersBean" label-width="90px">
          <el-form-item label="用户名">
            <el-input v-model="SystemTmsUsersBean.usersUsername"></el-input>
          </el-form-item>
          <el-form-item label="快递员编号">
            <el-input v-model="SystemTmsUsersBean.usersCustomerId"></el-input>
          </el-form-item>
          <el-form-item label="岗位编号">
            <el-input v-model="SystemTmsUsersBean.usersPostId"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="SystemTmsUsersBean.usersAccountNumber" type="password"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="SystemTmsUsersBean.usersPassword"></el-input>
          </el-form-item>
          <el-form-item label="性别"> 
            <el-radio-group style="disabled" v-model="SystemTmsUsersBean.usersSex" >
              <el-radio label="1" style="disabled">男</el-radio>
              <el-radio label="0" style="disabled">女</el-radio>
            </el-radio-group>

<!-- <el-radio-group v-model="msg.repastBizType">
  <el-radio :lable="1" :disabled="msg.repastBizType !== '' && msg.repastBizType !== 1">千里马</el-radio>
  <el-radio :lable="0" :disabled="msg.repastBizType !== '' && msg.repastBizType !== 0">了设计费</el-radio>
</el-radio-group> -->

          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="SystemTmsUsersBean.usersPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="SystemTmsUsersBean.usersMailbox"></el-input>
          </el-form-item>
           <el-form-item label="创建时间">
            <el-input v-model="SystemTmsUsersBean.usersCreateTime"></el-input>
          </el-form-item>
          <el-form-item>
            <template >
            <el-button type="primary" icon="el-icon-edit" size="medium"  @click.native="updateRow(SystemTmsUsersBean)">修改个人信息</el-button>
            <el-button>取消</el-button>
            </template>
          </el-form-item>
        </el-form>  
        <!-- 这是信息修改弹出框 -->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-ruleForm" >
                <el-form-item label="我的序列ID" style="display:none" >
                  <el-input v-model="ruleForm.systemUserId"  type="hidden"  ></el-input>
                </el-form-item>
                <el-form-item label="用户名"  prop="usersUsername">
                  <el-input v-model="ruleForm.usersUsername"  ></el-input>
                </el-form-item>
                <el-form-item label="账号">
                  <el-input v-model="ruleForm.usersAccountNumber" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="usersPassword">
                  <el-input v-model="ruleForm.usersPassword" type="password" ></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="usersSex">
                  <el-radio-group v-model="ruleForm.usersSex">
                    <el-radio label="1">男</el-radio>
                    <el-radio label="0">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码" prop="usersPhone">
                  <el-input v-model="ruleForm.usersPhone"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="usersMailbox">
                  <el-input v-model="ruleForm.usersMailbox"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-edit" size="medium"  @click.native="submitForm('ruleForm')">确认修改个人信息</el-button>
                  <el-button  @click="(dialogFormVisible = false)">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
        <!-- 下面是表格 -->
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,  //模态框
      activeName: "second",//蓝色杠与标题
      title: "",  //修改与添加共有整合了一个头部信息
      options: [],
      SystemTmsUsersBean:[],
      //修改共用的一个数据类
      ruleForm: {
        systemUserId:"",
        usersUsername: "",
        usersPassword: "",
        usersSex:"",
        usersPhone: "",
        usersMailbox: "", 
      },
      //表单判断是否为空
      rules: {
        usersUsername: [{ required: true, message: "用户名不可为空", trigger: "blur" }],
        usersPassword: [{ required: true, message: "用户密码不可为空", trigger: "blur" }],
        usersSex: [{ required: true, message: "性别不可为空", trigger: "blur" }],
        usersPhone: [{ required: true, message: "电话号码不可为空", trigger: "blur" }],
        usersMailbox: [{ required: true, message: "邮箱不可为空", trigger: "blur" }],
      },
    }
  },
  methods:{
    //确认修改提交
    submitForm(formUpdatebean) {
      console.log("查看**************")
      console.log(this.ruleForm)
      this.$refs[formUpdatebean].validate((valid) => {
        if (valid) {
            this.axios.post("/api/updateByusersAccountNumber", this.ruleForm).then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.dialogFormVisible = false;
                this.load();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改展示数据
      updateRow(tbBean) {
      this.dialogFormVisible = true;
      this.title = "修改我的个人信息";
      this.ruleForm.systemUserId = tbBean.systemUserId;
      this.ruleForm.usersUsername = tbBean.usersUsername;
      this.ruleForm.usersAccountNumber = tbBean.usersAccountNumber;
      this.ruleForm.usersPassword = tbBean.usersPassword;
      this.ruleForm.usersSex =tbBean.usersSex;
      this.ruleForm.usersPhone = tbBean.usersPhone;
      this.ruleForm.usersMailbox = tbBean.usersMailbox;
    },
    load() {
      console.log(JSON.parse(sessionStorage.getItem("user")))
      this.axios
        .get("/api/FindKDYinformationByinformation?usersAccountNumber="+JSON.parse(sessionStorage.getItem("user"))).then((res) => {
          console.log(res.data)
          this.SystemTmsUsersBean = res.data;
        });
    },
  },
  //初始化加载
   created() { this.load(); },
}
</script>

<style scoped>
.img1{width: 50px;height: 60px;position: relative;left: -450px;}
.w {
  width: 1200px;
  height: 310px;
  position: relative;
  left: 20px;
  margin: -10px auto;
  text-align: center;
}
.z {
  font-size: 18px;
  color: #000;
}
.a1 {
  position: relative;
  left: 130px;
}
.a2 {
  position: relative;
  left: 220px;
}
.a3 {
  position: relative;
  left: 320px;
}


.dd {
  text-align: right;
}
el-menu-item {
  size: 0cm;
  color: #000;
}boxMainA
.a {
  margin: -17px auto;
  left: 50%;
}

.el-container {
  margin: -10px auto;
  margin-left: -10px;
  margin-right: -10px;
}






.boxMainA {
  width: 1000px;
  height: 1000px;
  margin: -10px auto;
  text-align: center;
  position: relative;
  top: 10px;
}
</style>